<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>星级评价</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .star-wp {
            background-image: url("../img/star.png");
            width: 109px;
            height: 21px;
        }
        .star-5 {
            background-position: 0 -1px;
        }
        .star-4 {
            background-position: 0 -25px;
        }
        .star-3 {
            background-position: 0 -50px;
        }
        .star-2 {
            background-position: 0 -75px;
        }
        .star-1 {
            background-position: 0 -100px;
        }
        .star-0 {
            background-position: 0 -124px;
        }
        .star-wp span {
            float: left;
            width: 21px;
            height: 21px;
        }
    </style>
</head>
<body>
<h1>各级别星级评价</h1>
<hr>
<h3>5</h3>
<div class="star-wp star-5"></div>
<h3>4</h3>
<div class="star-wp star-4"></div>
<h3>3</h3>
<div class="star-wp star-3"></div>
<h3>2</h3>
<div class="star-wp star-2"></div>
<h3>1</h3>
<div class="star-wp star-1"></div>
<h3>0</h3>
<div class="star-wp star-0"></div>
<hr>
<h1>设定星级</h1>
<hr>
<h3>当前星级：<span id="level">0</span></h3>
<div id="starWp" class="star-wp star-0">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

<script src="jquery-3.1.0.js"></script>
<script>
    !function(window,document,$,undefined){
        var $starWp = $('#starWp'),
            $stars = $starWp.find('span');
        $stars.on('mouseover',function(){
            var $this = $(this),
                index= $this.index();
            $starWp.attr('class','star-wp star-'+ ++index);
            $('#level').text(index);
        });
    }(window,document,jQuery);
</script>
</body>
</html>